import React, { memo, useEffect, useState } from "react";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { getProgramToplists } from "../store/actionType";
import { getSizeImage } from "@/utils/format-utils";
import { RankWrap } from "./style";
import classNames from "classnames";
import { NavLink } from "react-router-dom";

export default memo(function Rank() {
  const [state, setstate] = useState();

  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(getProgramToplists());
  }, [dispatch]);
  const { djProgramToplists } = useSelector(
    (state) => ({
      djProgramToplists: state.getIn(["djPlaylists", "djProgramToplist"]),
    }),
    shallowEqual
  );

  const showPlay = (id) => {
    setstate(id)(id);
  };

  const closePlay = () => {
    setstate(false);
  };

  return (
    <RankWrap>
      <div className="rankBox wrap-v2">
        <div className="rankBox-title">
          <p>
            节目排行榜 <span>最近更新</span>
          </p>
        </div>
        <ul className="rank-ul">
          {djProgramToplists.length !== 0
            ? djProgramToplists.toplist.map((item, index) => {
                const isSelect = item.program.mainSong.id === state;
                return (
                  <li
                    onMouseMove={(e) => showPlay(item.program.mainSong.id)}
                    onMouseLeave={closePlay}
                    key={item.program.id}
                    className="jm-libox"
                  >
                    <div className="jm-rank fl">
                      <p className="jm-rank-ph">
                        {item.rank < 10 ? "0" + item.rank : item.rank}
                      </p>
                      {/* <p>{item.lastRank-item.rank}</p> */}
                      {item.lastRank - item.rank == 0 ? (
                        <p className="zeroP">
                          <i className="jmicon imgIcon zero"></i>
                          {item.lastRank - item.rank}
                        </p>
                      ) : item.lastRank == -1 ? (
                        <i className="jmicon imgIcon new"></i>
                      ) : item.lastRank - item.rank < 0 ? (
                        <p className="downP">
                          <i className="jmicon imgIcon down"></i>
                          {Math.abs(item.lastRank - item.rank)}
                        </p>
                      ) : (
                        <p className="upP">
                          <i className="jmicon imgIcon up"></i>
                          {item.lastRank - item.rank}
                        </p>
                      )}
                    </div>
                    <div
                      className="fl jm-imgbox"
                      style={{ width: "40px", height: "40px" }}
                    >
                      <img
                        src={getSizeImage(item.program.coverUrl, 40)}
                        alt=""
                      />
                      <i
                        className={classNames({
                          isShow: isSelect,
                          mskPlay: true,
                        })}
                      ></i>
                    </div>
                    <div className="jm-name-box fl">
                      <div>
                        <NavLink
                          to={{
                            pathname: "/program",
                            search: "?id=" + item.program.id,
                          }}
                        >
                          {item.program.mainSong.name}
                        </NavLink>
                      </div>
                    </div>
                    <div className="jm-program-radio fl">
                      <NavLink
                        to={{
                          pathname: "/djradio",
                          search: "?id=" + item.program.radio.id,
                        }}
                      >
                        {item.program.radio.name}
                      </NavLink>
                    </div>
                    <div className="jm-program-categories fl">
                      <NavLink
                        to={{
                          pathname: "/discover/djradio/category",
                          search: "?id=" + item.program.radio.categoryId,
                        }}
                      >
                        {item.program.radio.category}
                      </NavLink>
                    </div>
                    <div className="jm-speed fl">
                      <div className="speedlength tablepng">
                        <i
                          style={{ width: (item.score * 100) / 152222 + "%" }}
                          className="speedscore tablepng"
                        ></i>
                      </div>
                    </div>
                  </li>
                );
              })
            : ""}
        </ul>
      </div>
    </RankWrap>
  );
});
